<template>
  <div class="contBox">
    <div class="workTotal">
      <div
        class="dataBoxs"
        :style="{ background: 'linear-gradient(to right,#ff9090, #ff6969)' }"
      >
        <div class="topNumber" style="color:#d62828">{{ wait }}</div>
        待接单
      </div>
      <div
        class="dataBoxs"
        :style="{ background: 'linear-gradient(to right, #98b5ff, #67b5ff)' }"
      >
        <div class="topNumber" style="color:#4578e3">{{ doing }}</div>
        处理中
      </div>
      <div
        class="dataBoxs"
        :style="{ background: 'linear-gradient(to right, #ffe38f, #ffcd68)' }"
      >
        <div class="topNumber" style="color:#e9bc43">{{ complete }}</div>
        已处理
      </div>
    </div>
    <div class="workSearch">
      <!-- 选择器 -->
      <el-select
        v-model="value"
        placeholder="请选择"
        style="margin-right:10px"
        @change="onSelSearch"
      >
        <el-option :value="''" :label="'全部'">全部</el-option>
        <el-option
          v-for="(wotItem, index) in woQuryType"
          :key="index"
          :label="wotItem.dictValue"
          :value="wotItem.dictKey"
        />
      </el-select>
      <!-- 搜索属性 -->
      <div class="demo-input-suffix" style="margin-right:10px">
        <el-input
          v-model="input.code"
          placeholder="输入工单号搜索"
          prefix-icon="el-icon-search"
          @keyup.enter.native="onSearch"
        />
      </div>
      <div class="demo-input-suffix">
        <el-input
          v-model="input.companyCodeOrName"
          placeholder="输入用户名/姓名搜索"
          prefix-icon="el-icon-search"
          @keyup.enter.native="onSearch"
        />
      </div>
    </div>
    <!-- 工单列表 -->
    <el-table :data="woList" border row-key="code">
      <el-table-column prop="code" label="工单编号" />
      <el-table-column prop="typeDictValue" label="类型" />
      <el-table-column prop="moduleDictValue" label="所属模块" />
      <el-table-column prop="statusValue" label="状态" />
      <el-table-column prop="createdUserName,createdRealName" label="客户">
        <template slot-scope="scope">
          {{ scope.row.createdUserName }}({{ scope.row.createdRealName }})
        </template>
      </el-table-column>
      <el-table-column prop="createdDate" label="创建时间" />
      <el-table-column prop="doneRealName" label="处理人" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="showDispose(scope.row)">
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <RPagination
      :current="current"
      :size="size"
      :total="total"
      @onPageChange="handleCurrentChange"
    />
    <OrderView :visible="modalKey === modalKeys.dispose" is-service />
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import OrderView from '@/components/WorkOrders/OrderView'
import RPagination from '@/components/r-pagination'

export default {
  components: {
    OrderView,
    RPagination
  },
  data() {
    return {
      input: {
        // 搜索
        code: '',
        companyCodeOrName: ''
      },
      value: '',
      modalKeys: {
        dispose: 'dispose'
      }
    }
  },
  computed: {
    ...mapState('serviceOrder', [
      'loading',
      'woList',
      'conditins',
      'size',
      'current',
      'total',
      'wait',
      'doing',
      'complete'
    ]),
    ...mapGetters(['modalKey', 'dicMap', 'dicCodes']),
    woType() {
      return this.dicCodes['work_order_status']
    },
    woQuryType() {
      // 查询状态
      return this.dicMap[this.woType]
    }
  },
  mounted() {
    this.$store.dispatch('serviceOrder/LoadeWoPage')
    this.$store.dispatch('serviceOrder/getStat')
    this.$store.dispatch('common/getDictChild', this.woType)
  },
  methods: {
    onSearch() {
      this.$store.dispatch('serviceOrder/LoadeWoPage', this.input)
    },
    onSelSearch(e) {
      this.$store.dispatch('serviceOrder/LoadeWoPage', { statusDict: e })
    },

    handleCurrentChange(val) {
      this.$store.dispatch('serviceOrder/LoadeWoPage', { current: val })
    },
    showDispose(item) {
      // 状态(W:等待；D：处理中；C：完成) 在 等待状态可以编辑，处理状态不可修改
      // const { statusDict } = item || {}
      this.$store.dispatch('showModal', {
        modalKey: this.modalKeys.dispose,
        modalData: { ...item }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.contBox {
  .workTotal {
    display: flex;
    justify-content: space-around;
    .dataBoxs {
      width: 32%;
      height: 150px;
      border-radius: 20px;
      text-align: center;
      font-size: 22px;
      color: #fff;
      .topNumber {
        height: 102px;
        margin: auto;
        line-height: 127px;
        font-size: 46px;
      }
    }
  }
  .workSearch {
    display: flex;
    justify-content: flex-end;
    margin: 10px 0 20px 0;
  }
}
</style>
